<template>
	<div style="height: 100%;width: 100%;">
		<h3>头像修改-教师学生同页面组件</h3>
		<hr>
		<div style="width: 100%;height: 100%;display: flex;flex-direction: row;">
			<div style="width: 20%;height: 100%">
				<h3>当前我的图片	</h3>
				<img :src="pic()" style="width: 10vw;height: 10vw;">
			</div>
			<div style="width: 80%;height: 100%;display: flex;flex-direction: column;align-items: flex-start;">
				<h3>上传新的图片</h3>
				<p><input type="file" ref="img" @change="handleFileChange"></p>
				<hr style="width: 100%;">
				<button @click="save()">更新我的图片</button>
			</div>
		</div>
		<br />
	</div>
</template>

<script setup>
	import {$postf} from "@/ajax";
	import store from "../store";
	import { ref } from "vue";
	
	const pic = () =>{
		return "http://127.0.0.1:9000/api/public/showimg/" + store.state.user.pic;
	}
	
	const img = ref(null);
	
	const save = () =>{
		let fd = new FormData
		
		const file = img.value.files[0]
		
		fd.append("mypic", file);
		
		$postf("/api/user/updatePic", fd).then((resp) => {
				store.state.user.pic = resp.data.data.pic
				store.state.msg = "图片修改完成..."
			})	
	}

</script>

<style>
</style>
